<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="commons :: head(~{::title})">
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>关于我</title>
<!--    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.css">-->
<!--    <link rel="stylesheet" th:href="@{/css/semantic.min.css}">-->
<!--    <link rel="stylesheet" th:href="@{/css/style.css}">-->
</head>
<body>

    <!--头部导航开始-->
    <!--thymeleaf 片段替换-->
    <div th:replace="commons :: header(5)"></div>
    <!--头部导航结束-->

    <!--中间部分开始-->
    <div class="v-container v-padded-tb-big">
        <div class="ui container">

            <div class="ui stackable grid">

                <div class="eleven wide column">
                    <div class="ui segment">
                        <img src="https://picsum.photos/id/1027/800/600" alt="" class="ui rounded image">
                    </div>
                </div>

                <div class="five wide column">
                    <div class="ui top attached segment">
                        <div class="ui header">关于我</div>
                    </div>
                    <div class="ui attached segment">
                        <p class="v-text-thin" th:text="#{about.introduceTitle}">veo，一个独立开发者，折腾在 0 和 1 世界的新手；一个终身学习者，誓将学习无限循环. 希望结识可以共同成长的小伙伴. </p>
                        <p class="v-text-thin" th:text="#{about.introduceBody}">热爱编程，喜欢折腾，正在探索高效学习编程技术的方法...</p>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui orange basic left pointing label v-margin-tb-tiny">编程</div>
                        <div class="ui orange basic left pointing label v-margin-tb-tiny">写作</div>
                        <div class="ui orange basic left pointing label v-margin-tb-tiny">思考</div>
                        <div class="ui orange basic left pointing label v-margin-tb-tiny">运动</div>
                        <div class="ui orange basic left pointing label v-margin-tb-tiny">编程</div>
                        <div class="ui orange basic left pointing label v-margin-tb-tiny">写作</div>
                        <div class="ui orange basic left pointing label v-margin-tb-tiny">思考</div>
                        <div class="ui orange basic left pointing label v-margin-tb-tiny">运动</div>
                    </div>
                    <div class="ui attached segment">
                        <div class="ui teal basic left pointing label v-margin-tb-tiny">java</div>
                        <div class="ui teal basic left pointing label v-margin-tb-tiny">php</div>
                        <div class="ui teal basic left pointing label v-margin-tb-tiny">c++</div>
                        <div class="ui teal basic left pointing label v-margin-tb-tiny">node</div>
                        <div class="ui teal basic left pointing label v-margin-tb-tiny">vue</div>
                        <div class="ui teal basic left pointing label v-margin-tb-tiny">...</div>
                    </div>
                    <div class="ui bottom attached segment">
                        <a href="#" class="ui circular icon button"><i class="github icon"></i></a>
                        <a href="#" class="ui wechat circular icon button"><i class="weixin icon"></i></a>
                        <a href="#" class="ui qq circular icon button" th:data-content="#{index.qq}" data-position="bottom center"><i class="qq icon"></i></a>
                    </div>

                    <div class="ui wechat-qr flowing popup transition hidden">
                        <img th:src="@{/images/wechat.jpg}" alt="微信图片" class="ui rounded image" style="width: 110px">
                    </div>

                    </div>
            </div>

        </div>
    </div>
    <!--中间部分结束-->
    <br>
    <br>

    <!--底部部分开始-->
    <!--thymeleaf 片段替换-->
    <div th:replace="commons :: #footer"></div>
    <!--底部部分结束-->


<!--<script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script>-->
<!--<script src="https://cdn.jsdelivr.net/npm/semantic-ui@2.4.2/dist/semantic.min.js"></script>-->
<!--<script th:src="@{/js/jquery-3.6.0.min.js}"></script>-->
<!--<script th:src="@{/js/semantic.min.js}"></script>-->

<!--/*/<th:block th:replace="commons :: script">/*/-->
    <!--thymeleaf 引入js资源，这三行不为注释-->
<!--/*/</th:block>/*/-->
<script>
    $('.menu.toggle').click(function () {
        $('.v-item').toggleClass('v-mobile-hidden')
    });

    $('.qq').popup();

    $('.wechat').popup({
        popup: $('.wechat-qr.popup'),
        position:  'bottom center'
    })
</script>
</body>
</html>

